<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头像上传测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        .upload-section {
            border: 2px dashed #ccc;
            padding: 30px;
            text-align: center;
            margin: 20px 0;
        }
        .preview {
            margin: 20px 0;
        }
        .preview img {
            max-width: 200px;
            max-height: 200px;
            border-radius: 50%;
        }
        button {
            background: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #337ecc;
        }
        .result {
            margin: 20px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            background: #f0f9ff;
            border: 1px solid #409eff;
            color: #409eff;
        }
        .error {
            background: #fef0f0;
            border: 1px solid #f56c6c;
            color: #f56c6c;
        }
    </style>
</head>
<body>
    <h1>头像上传测试</h1>
    
    <div class="upload-section">
        <input type="file" id="avatarInput" accept="image/*" style="display: none;">
        <button onclick="document.getElementById('avatarInput').click()">选择头像文件</button>
        <p>支持 JPG、PNG 格式，文件大小不超过 5MB</p>
    </div>
    
    <div class="preview" id="preview" style="display: none;">
        <h3>预览:</h3>
        <img id="previewImg" src="" alt="预览">
        <br><br>
        <button onclick="uploadAvatar()">上传头像</button>
    </div>
    
    <div id="result"></div>
    
    <script>
        let selectedFile = null;
        
        document.getElementById('avatarInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            // 验证文件
            if (!file.type.startsWith('image/')) {
                showResult('请选择图片文件', 'error');
                return;
            }
            
            if (file.size > 5 * 1024 * 1024) {
                showResult('图片大小不能超过5MB', 'error');
                return;
            }
            
            selectedFile = file;
            
            // 显示预览
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('previewImg').src = e.target.result;
                document.getElementById('preview').style.display = 'block';
            };
            reader.readAsDataURL(file);
        });
        
        async function uploadAvatar() {
            if (!selectedFile) {
                showResult('请先选择文件', 'error');
                return;
            }
            
            const formData = new FormData();
            formData.append('avatar', selectedFile);
            
            try {
                // 这里需要替换为实际的token
                const token = prompt('请输入登录token（从浏览器开发者工具中获取）:');
                if (!token) {
                    showResult('需要登录token才能上传', 'error');
                    return;
                }
                
                const response = await fetch('http://localhost:8081/api/profile/upload-avatar', {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    showResult(`头像上传成功！头像URL: ${result.data.avatarUrl}`, 'success');
                } else {
                    showResult(`上传失败: ${result.message}`, 'error');
                }
            } catch (error) {
                showResult(`上传失败: ${error.message}`, 'error');
            }
        }
        
        function showResult(message, type) {
            const resultDiv = document.getElementById('result');
            resultDiv.className = `result ${type}`;
            resultDiv.textContent = message;
        }
    </script>
</body>
</html>